<template>
	<view class="edit-page">
		<view class="contentBox">
			<u-tabs :list="list1" @click="click"></u-tabs>
			<view class="form-list" v-show="list1Index == 0">
				<view class="form-item">
					<view class="title required">生成</view>
					<input v-model="dataForm.month" placeholder="请输入房租" class="input" type="digit" />
					<view class="unit">个月的费用</view>
				</view>
				<view class="form-item">
					<view class="title required">开始时间</view>
					<view class="value-box" @click="showStartTime = true">
						<view class="value-info">{{ dataForm.str_date ? dataForm.str_date : '请选择' }}</view>
						<u-icon name="arrow-right" color="#000000"></u-icon>
					</view>
				</view>
				<view class="form-item">
					<view class="title required">结束时间</view>
					<view class="value-box" @click="showEndTime = true">
						<view class="value-info">{{ dataForm.end_date ? dataForm.end_date : '请选择' }}</view>
						<u-icon name="arrow-right" color="#000000"></u-icon>
					</view>
				</view>
			</view>

			<view class="form-list" v-show="list1Index == 1">
				<view class="form-item">
					<view class="title required">名称</view>
					<view class="value-box">
						<view class="value-info">
							<input v-model="dataForm.name" placeholder="请输入名称" class="input" />
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="title required">金额</view>
					<view class="value-box">
						<view class="value-info">
							<input v-model="dataForm.money" placeholder="请输入金额" class="input" />
						</view>
					</view>
				</view>
			</view>



			<view class="safe-bottom page-bottom">
				<view class="action-btn-group">
					<!-- <view class="action-btn1" @click="cancelSave">取 消</view> -->
					<view class="action-btn2" @click="save">生 成</view>
				</view>
			</view>
		</view>
		<u-datetime-picker :show="showStartTime" v-model="startTime" mode="date" closeOnClickOverlay
			@confirm="confirmStartDate" @change="changeStartDate" @cancel="showStartTime = false"></u-datetime-picker>
		<u-datetime-picker :show="showEndTime" v-model="endTime" mode="date" closeOnClickOverlay
			@confirm="confirmEndDate" @change="changeEndDate" @cancel="showEndTime = false"></u-datetime-picker>
	</view>
</template>

<script>
import {
	contractAddFecords
} from '@/api/landlord'


export default {
	data() {
		return {
			list1: [{
				name: '房租费用',
			}, {
				name: '临时费用',
			},],
			list1Index: 0,
			startTime: '',
			showStartTime: false,
			endTime: '',
			showEndTime: false,
			dataForm: {
				house_id: '',
				str_date: '',
				end_date: '',
				month: 1,
				name: '',
				money: '',
			},
		}
	},
	onLoad(options) {
		this.dataForm.house_id = options.house_id || ''
		this.dataForm.str_date = uni.$u.timeFormat(new Date(), 'yyyy-mm-dd');
		this.dataForm.end_date = this.getMonthBefore();
	},
	methods: {
		click(item) {
			this.list1Index = item.index;
			console.log('item', item);
		},
		save() {
			let data;
			if (this.list1Index == 0) {
				data = {
					house_id: this.dataForm.house_id,
					str_date: this.dataForm.str_date,
					end_date: this.dataForm.end_date,
					month: this.dataForm.month,
				}
			} else {
				data = {
					house_id: this.dataForm.house_id,
					name: this.dataForm.name,
					money: this.dataForm.money,
				}
			}
			contractAddFecords(data).then(res => {
				uni.showModal({
					title: '提示',
					content: '账单生成成功！',
					showCancel: false,
					success: ({ confirm, cancel }) => {
						uni.navigateTo({
							url: '/pages-landlord/house/receiptNew'
						});
					}
				})

			});
		},
		changeStartDate(e) {
			this.startTime = e.value; // 更新选择的日期
		},
		confirmStartDate(e) {
			this.showStartTime = false; // 关闭选择器
			this.dataForm.str_date = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
			this.dataForm.end_date = this.getMonthBeforeDate(this.dataForm.str_date, -this.dataForm.month);
		},
		changeEndDate(e) {
			this.endTime = e.value; // 更新选择的日期
		},
		confirmEndDate(e) {
			this.showEndTime = false; // 关闭选择器
			this.dataForm.end_date = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
			this.dataForm.start_time = this.getMonthBeforeDate(this.dataForm.str_date, this.dataForm.month);
		},
		//获取当前日期几个月前的日期
		getMonthBefore() {
			let date = new Date();
			date.setMonth(date.getMonth() + this.dataForm.month);
			return uni.$u.timeFormat(date, 'yyyy-mm-dd');
		},
		//获取指定日期几个月前的日期
		getMonthBeforeDate(date, month) {
			let d = new Date(date);
			d.setMonth(d.getMonth() - month);
			return uni.$u.timeFormat(d, 'yyyy-mm-dd');
		},

	}
}
</script>

<style lang="scss" scoped>
.filter-modal {
	background: #fff;
	height: 30vh;
	border-radius: 40rpx 40rpx 0 0;
	overflow-y: scroll;

	.header {
		position: fixed;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx;
		box-sizing: border-box;
		height: 120rpx;
		border-radius: 40rpx 40rpx 0 0;
		border-bottom: 1px solid #eee;
		background: #ffffff;
		z-index: 100;

		.confirm {
			color: #FE4F04;
		}
	}

	.fill-box {
		height: 120rpx;
	}

	.section-box {
		padding: 0 20rpx;
		margin: 20rpx 0 40rpx;

		.title {
			font-size: 28rpx;
			color: #222222;
			font-weight: 600;
			margin-bottom: 20rpx;
		}

	}

	.tags-box {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;

		.tag-item {
			font-size: 28rpx;
			height: 68rpx;
			line-height: 68rpx;
			padding: 0rpx 50rpx;
			border-radius: 40rpx;
			background: #F5F6FA;
			border: 1rpx solid #F5F6FA;
		}

		.tag-item.active {
			color: #FF7D41;
			background: #FFF6ED;
			border: 1rpx solid #FE4F04;
		}
	}
}

/* 底部操作菜单 */
.page-bottom {
	position: fixed;
	width: 100%;
	bottom: 0rpx;
	z-index: 200;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: #ffffff;
	border-radius: 16rpx;
	padding: 20rpx;
	box-sizing: border-box;

	button {
		margin: unset;
		padding: unset;
		background-color: #ffffff;
	}

	button::after {
		border: none;
	}

	.icon-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		color: #333333;
		margin-right: 48rpx;

		.label {
			font-size: 22rpx;
			color: #333333;
			margin-top: 6rpx;
		}
	}

	.action-btn-group {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		flex: 1;

		.action-btn1,
		.action-btn2 {
			width: 100%;
			height: 88rpx;
			font-weight: bold;
			font-size: 30rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx;
			border: 2rpx solid #FE4F04;
		}

		.action-btn1 {
			color: #FE4F04;
			background: #fff;
			margin-right: 10rpx;
		}

		.action-btn2 {
			color: #fff;
			background: #FE4F04;
			margin-left: 10rpx;
		}

	}
}

.edit-page {
	width: 100%;
	min-height: 100vh;
	background-color: #F7F8FA;
	position: relative;

	.contentBox {
		padding-bottom: 40rpx;
	}
}

.form-switch {
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.form-title {
	font-weight: bold;
	font-size: 26rpx;
	color: #2A0C00;
	margin: 24rpx 72rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.form-list {
	padding: 34rpx 40rpx;
	border-radius: 16rpx;
	margin: 20rpx 32rpx;
	background: #FFFFFF;

	.form-item,
	.form-item1 {
		.title {
			width: 180rpx;
			font-size: 28rpx;
			color: #666666;
		}

		.required::after {
			content: '*';
			color: #FE4F04;
			padding-left: 10rpx;
			font-size: 28rpx;
			font-weight: bold;
		}

		.unit {
			font-size: 28rpx;
			color: #222222;
			margin-left: 20rpx;
		}

		.input {
			flex: 1;
			text-align: right;
		}

		.value-box {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			flex: 1;
			margin-left: 10rpx;

			.value-info {
				font-size: 28rpx;
				color: #222222;
			}
		}

	}

	.form-item {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.form-item1 {
		margin-top: 20rpx;
	}

	.form-item:last-child {
		border-bottom: 0;
	}
}

.select-box {
	background: #FFFFFF;
	padding: 34rpx 40rpx;
	border-radius: 16rpx;
	margin: 20rpx 32rpx;

	.select-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: bold;
		font-size: 26rpx;
		color: #2A0C00;

		.icon-select {
			width: 48rpx;
			height: 48rpx;
		}

		.input {
			flex: 1;
			text-align: right;
		}
	}

	.select-list {
		.select-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			margin-top: 20rpx;

			.item-left {
				font-size: 28rpx;
				color: #666666;
			}

			.item-right {
				display: flex;
				align-items: center;

				.item-text {
					font-size: 28rpx;
					color: #222222;
					margin-right: 10rpx;
				}
			}
		}
	}
}

.date-type-box {
	//网格布局一行三个
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20rpx;
	background: #F5F6FA;
	border-radius: 16rpx;
	padding: 20rpx 30rpx;

	.date-type-item {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		padding: 10rpx 0;

		.icon-select {
			width: 36rpx;
			height: 36rpx;
			margin-right: 20rpx;
		}
	}
}
</style>